//确认订单
<template>
  <div class="release">
    <header><nav-bar :title="name" /></header>
    <main>
      <div class="top">
        <div class="top-left">
          <img :src="detail.image" />
        </div>
        <div class="top-right">
          <span class="name text-overflow">{{detail.name}}</span>
          <span class="price">￥{{detail.price}}</span>
          <span class="quantity">x1</span>
        </div>
      </div>
      <div class="parameters">
        <ul>
          <li>商品价格</li>
          <li>￥{{detail.price}}</li>
        </ul>
        <ul>
          <li>字符方式</li>
          <li>微信支付</li>
        </ul>
        <ul>
          <li>优惠劵折扣</li>
          <li>无</li>
        </ul>
        <van-divider />
        <ul>
          <li>配送方式</li>
          <li>物流配送</li>
        </ul>
        <ul>
          <li>下单时间</li>
          <li>{{ year + "-" + month + "-" + data }}</li>
        </ul>
      </div>
      <div class="personal">
        <div class="">
          <span>输入您的真实姓名</span>
          <input type="text" />
        </div>
        <div>
          <span>输入您的身份证号码</span>
          <input type="text" />
        </div>
        <div>
          <span>输入您的电话号码</span>
          <input type="text" />
        </div>
      </div>
    </main>
    <footer>
      <ul class="purchase">
        <li>共计1件</li>
        <li>合计</li>
        <li>￥{{detail.price}}</li>
        <li @click="orderClickEvt
        ">立即购买</li>
      </ul>
    </footer>
  </div>
</template> 

<script>
import navBar from "@/components/navBar";

export default {
  props: {},
  components: {
    navBar,
  },
  data() {
    return {
      name: "确认订单",
      year: null,
      month: null,
      data: null,
      id:'',
      detail:{}
    };
  },
  methods: {
    getGoodsDetails() { //商品详情
    this.$api.getGoodsDetails({
      id: this.id
    }).then(res=>{
      if(res.code == 200){
        console.log(res.data);
        res.data.content = res.data.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
        this.detail = res.data
      }
    })
  },
  orderClickEvt(){
    this.$router.push({path: '/my/order',query:{id:this.id}})
  }
  },

  created() {
    let time = new Date();
    this.year = time.getFullYear();
    this.month = time.getMonth() + 1;
    this.data = time.getDate();
    console.log(this.$route.query);
    this.id = this.$route.query._id
    this.getGoodsDetails()
  },

  mounted() {},

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
//只显示几行，剩余省略号
.text-overflow {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.release {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f4f4f4;
  position: relative;
  padding-top: 46px;
  .top {
    width: 92%;
    height: 6.16rem;
    margin: 0.7rem auto;
    background: #fff;
    border-radius: 5px;
    .top-left {
      width: 6.16rem;
      height: 6.16rem;
      padding: 0.65rem;
      float: left;
      border-radius: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .top-right {
      width: 15rem;
      height: 6.16rem;
      float: left;
      padding: 0.7rem;
      position: relative;
      .name {
        font-size: 12px;
      }
      .price {
        position: absolute;
        bottom: 0.65rem;
        left: 0.65rem;
      }
      .quantity {
        position: absolute;
        bottom: 0.65rem;
        right: 0;
        font-size: 12px;
      }
    }
  }
  .parameters {
    width: 92%;
    height: 13.49em;
    margin: 0.7rem auto;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    ul {
      width: 100%;
      height: 1.7rem;
      margin-top: 0.5rem;
      display: flex;
      justify-content: space-between;
      li {
        font-size: 12px;
        padding: 0.5rem;
      }
    }
  }
  .personal {
    width: 92%;
    height: 15.84rem;
    margin: 0.7rem auto;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    div {
      padding: 0.3rem 0.5rem;
      span {
        font-size: 12px;
        display: block;
        margin-bottom: 0.5rem;
      }
      input {
        width: 100%;
        height: 2.11rem;
        padding-left: 0.5rem;
        border: 1px solid #aeaeae;
        border-radius: 0.22rem;
        outline: none;
      }
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background: #fff;
    .purchase {
      position: relative;
      display: flex;
      height: 100%;
      width: 15rem;
      float: right;
      align-items: center;
      justify-content: space-evenly;
      li {
        font-size: 12px;
        &:nth-child(1) {
          color: #595959;
        }
        &:nth-child(2) {
          font-weight: 600;
        }
        &:nth-child(3) {
          color: red;
          font-size: 14px;
          font-weight: 600;
        }
        &:nth-child(4) {
          width: 5.41rem;
          height: 1.95rem;
          background: linear-gradient(309deg, #20bca9 0%, #01c8c3 100%);
          text-align: center;
          border-radius: 0.43rem;
          line-height: 1.95rem;
          color: #fff;
        }
      }
    }
  }
}
</style>